<template>

  <div v-if=!isAdmin class="login">

    <div class="text">
      <input type="text" placeholder="用户名" v-model="username" class="id">
      <span @click="isAdminLogin()">是管理员?</span>
    </div>

    <div class="password">
      <input type="password" placeholder="密码" @keyup.enter="toShow" v-model="password" class="pass">
      <span @click="findBackPassword()">忘记密码?</span>
    </div>

    <div class="right" @click="userLogin()">登录</div>
    <div class="left" @click="userRegister()">注册</div>
  </div>


  <!-- <div v-else class="login">

    <div class="text">
      <input type="text" placeholder="用户名" v-model="username" class="id">
    </div>

    <div class="password">
      <input type="password" placeholder="密码" v-model="password" class="pass">
    </div>

    <div class="right" @click="adminLogin()">登录</div>
    <div class="left" @click="backLogin()">返回</div>
  </div> -->


</template>
<!-- 引入组件库 -->
<script>
  import app from '../App.vue'
  export default {
    data() {
      return {
        username: '',
        password: '',
        isAdmin: false
      }
    },
    methods: {
      userLogin: function (event) {
        console.log('successs');
        this.$http.post('http://localhost:5000/users/login', {
          username: this.username,
          password: this.password

        }).then((data) => {
          if (data.body.status == 1) {
            // alert(data.body.message)
            this.$message({
              message: data.body.message,
              type: 'error'
            });
          } else {
            let save_token = {
              // token: data.body.data.token,
              username: this.username,
            }
            console.log(data.body.data.user[0])
            localStorage.setItem('token', data.body.data.token);
            localStorage.setItem('username', data.body.data.user[0].username);
            localStorage.setItem('_id', data.body.data.user[0]._id);
            localStorage.setItem('username', this.username);
            this.$router.push({
              path: 'Discover'
            })
            this.$router.go(0)
          }
        })
      },

      //      注册跳转页面
      userRegister: function (event) {
        this.$router.push({
          path: 'register'
        })
      },
      //      找回密码
      findBackPassword: function (event) {
        this.$router.push({
          path: 'findPassword'
        })
      },
      //切换登录管理员页面
      isAdminLogin: function (event) {
        // this.isAdmin = true
        this.$router.push({
          path: 'Admin'
        })
      },
      backLogin: function (event) {
        // this.isAdmin = false

      },


      adminLogin: function (event) {
        // console.log(suc);
        this.$http.post('http://localhost:5000/users/adminLogin', {
          username: this.username,
          password: this.password
        }).then(data => {
          console.log(data.body);
          this.$message({
              message: data.body.message,
              type:data.body.type 
            });
          {
            // let save_token = {
            //   username: this.username,
            // }
            console.log(data.body);
            console.log(data.body.data.user[0])
            localStorage.setItem('token', data.body.data.token);
            localStorage.setItem('username', data.body.data.user[0].username);
            localStorage.setItem('_id', data.body.data.user[0]._id);
            localStorage.setItem('username', this.username);
            console.log('successsadmin');
            this.$router.push({
            path: 'Admin'
          })
          // this.$message({
          //   message: data.data.message,
          //   type: data.data.type
          // });
           
          this.$router.go(0)
          }
          
        })

      }
    }

  }
</script>
<style scoped>
  #head {
    color: rgb(255, 255, 255, 0.7);
    font-size: 20px;
    position: absolute;
    left: 700px;
    top: 180px;
  }

  .login {
    width: 1000px;
    height: 500px;
  }


  .text,
  .password {
    position: absolute;
    top: 50px;
    left: 500px;
    width: 340px;
    height: 53px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 25px;
    margin: 50px 0px;
  }

  .password {
    top: 135px;
  }

  .password span,
  .text span {
    color: rgb(255, 255, 255, 0.5);
    position: absolute;
    right: 20px;
    top: 16px;
    font-size: 14px;
    cursor: pointer;
  }

  input {
    position: absolute;
    left: 0%;
    top: 17%;
    width: 80%;
    height: 64%;
    background: transparent;
    /* border-radius: 5px; */
    font-size: 14px;
    border: none;
    /* border: 2px solid rgba(255, 255, 255, 0.3); */
    color: rgb(255, 255, 255, 0.7);
    padding: 0 7%;
    outline: none;
    letter-spacing: 3px;
  }

  .border {
    /* border: solid 2px rgb(255, 255, 255,0.3); */
    position: absolute;
    left: 2%;
    top: 20%;
    width: 95%;
    height: 55%;
    border-radius: 5px;
  }

  .left {
    position: absolute;
    left: 500px;
    top: 290px;
    background: rgb(0, 0, 0, 0.3);
    width: 55px;
    height: 20px;
    border-radius: 25px;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.7);
    cursor: pointer;
  }

  .right {
    position: absolute;
    left: 752px;
    top: 290px;
    background: rgb(0, 0, 0, 0.3);
    width: 55px;
    height: 20px;
    border-radius: 25px;
    padding: 15px;
    text-align: center;
    color: rgb(255, 255, 255, 0.7);
    cursor: pointer;
  }
</style>